/** @jsxImportSource @emotion/react */
import {
  BlobInputList, CCell, Cell, Input, InputLine, LineColumn, SuffixInput, Table, TableBody, TableHead, TableRow, Text
} from "customize-easy-ui-component";
import * as React from "react";
import {InspectRecordLayout, InternalItemProps, RepLink, SelectInput, useItemInputControl} from "../../common/base";
import {calcAverageArrObj,tableSetInp} from "../../../common/tool";
import {useMeasureInpFilter} from "../../common/hooks";
import {检查结论选} from "../../tools";
import {css} from "@emotion/react";
import {天气选, 路面选} from "./Speed";

export const tail杆拉力= <Text css={{"@media print": {fontSize: '0.875rem'}}}>
  注：1、冷态制动力应大于要求值。<br/>
  2、热衰减试验制动力应不小于冷态试验制动力的75%。<br/>
  3、最大操纵力要求：踩下踏板，最大操纵力≤450N；松开踏板，最大操纵力≤200N；握紧手把，最大操纵力≤150N；转向操纵杆，最大操纵力≤150N。
</Text>;
const 项目s= ['冷态行车制动','热衰减行车制动' ];
const 项目ts= ['冷制','热制'];
const itemAtb杆拉=['冷制前进','冷制后退','热制前进','热制后退'];
const 行驶s= ['前进','后退' ];
const 方向s= ['正','反' ];
const 试验杆s= ['冷态制动力（kN）','冷态最大操纵力（N）','热衰减制动力（kN）','热衰减最大操纵力（N）'];
//附表10，11采用不同命名字段：
const 试验杆ns= ['冷态制力','冷操纵','热衰制','热操纵'];
const 试验杆Rs= ['C3.5.2', 'C3.5.4'];
export const itemA杆拉力= ['天气杆拉','温度杆拉','风速杆拉','湿度杆拉','路面杆拉',] as string[];
itemA杆拉力.push(...itemAtb杆拉);
试验杆ns.forEach((name, i: number) => {
  if(0===i || 2===i)  itemA杆拉力.push(name+'a',name+'v',name+'r');
  else  itemA杆拉力.push(name+'a',name+'v');
});
export const RodTensileForce=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA杆拉力,);
      const {inp, setInp} = useItemInputControl({ ref });
      const avBrkF=itemAtb杆拉.flatMap(table => (Number(calcAverageArrObj(inp?.[table],(row)=>row?.F, 2,2)) || '') );
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        试验条件：
        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center',justifyContent:'center'}}>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              天气:
                <BlobInputList value={inp?.天气杆拉 || ''} rows={1} datalist={天气选}
                           style={{display: 'inline-flex', width: '5rem', maxWidth: '100%', fontSize: '1rem',}}
                           listStyle={css({fontSize: '1rem',})}
                           onListChange={v => setInp({...inp, 天气杆拉: v || undefined})}/>
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              温度：
              <Input value={inp?.温度杆拉 || ''} size={2} style={{display: 'inline-flex', width: 'unset'}}
                      onChange={e => setInp({...inp, 温度杆拉: e.currentTarget.value || undefined}) }/>
              ℃；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              最大风速：
                <Input value={inp?.风速杆拉 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                       onChange={e => setInp({...inp, 风速杆拉: e.currentTarget.value || undefined}) }/>
              m/s；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            空气最大相对湿度:
                  <Input value={inp?.湿度杆拉 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                          onChange={e => setInp({...inp, 湿度杆拉: e.currentTarget.value || undefined}) }/>
            %；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              试验路面类型：
                <BlobInputList value={inp?.路面杆拉 || ''} rows={1} datalist={路面选}
                               style={{display: 'inline-flex', width: '19rem', maxWidth: '100%', fontSize: '1rem',}}
                               listStyle={css({fontSize: '1rem',})}
                               onListChange={v => setInp({...inp, 路面杆拉: v || undefined})}/>
            </div>
        </div>
        <hr/>
        {项目s.map((bigxm, k: number) => {
          return <React.Fragment key={k}>
            <Text variant="h6" css={{fontWeight: 800}}>制动项目, 满载 + {bigxm}:</Text>
            <LineColumn column={8}>
              {行驶s.map((xst, i: number) => {
                const sbiao=项目ts[k] + xst;
                return <React.Fragment key={i}>
                    {方向s.map((fxian, t: number) => {
                      return <React.Fragment key={t}>
                        <InputLine label={`${xst}-${fxian}-实测速度`}>
                          <SuffixInput value={inp?.[sbiao]?.[t]?.s || ''}
                                       onChange={e => tableSetInp(sbiao, t, inp, setInp, 's', e.currentTarget.value || undefined)}>km/h</SuffixInput>
                        </InputLine>
                        <InputLine label={`${xst}-${fxian}-制动力F`}>
                          <SuffixInput value={inp?.[sbiao]?.[t]?.F || ''}
                                       onChange={e => tableSetInp(sbiao, t, inp, setInp, 'F', e.currentTarget.value || undefined)}>kN</SuffixInput>
                        </InputLine>
                        <InputLine label={`${xst}-${fxian}-最大操纵力`}>
                          <SuffixInput value={inp?.[sbiao]?.[t]?.m || ''}
                                       onChange={e => tableSetInp(sbiao, t, inp, setInp, 'm', e.currentTarget.value || undefined)}>N</SuffixInput>
                        </InputLine>
                      </React.Fragment>;
                    })}
                </React.Fragment>;
              })}
            </LineColumn>
            {行驶s.map((xst, i: number) => {
              return  `${bigxm} ${xst} 平均制动力F= ${avBrkF[k*2 +i]}（kN） `
            })}
          </React.Fragment>;
        })}
        <hr/>
        试验项目:
        {试验杆Rs.map((area, i: number) => {
            const btag=试验杆ns[i*2 ];
            return <React.Fragment key={i}>
                <LineColumn>
                  {(new Array(2).fill(null)).map((_,t:number) => {
                    const tag=试验杆ns[i*2 +t];
                    const title=试验杆s[i*2 +t];
                    return <React.Fragment key={t}>
                      <InputLine label={title+'-要求值'}>
                        <SuffixInput value={inp?.[tag+'a'] || ''}
                                     onChange={e => setInp({...inp, [tag+'a']: e.currentTarget.value || undefined})}>
                          {0===t? 'kN' : 'N'}</SuffixInput>
                      </InputLine>
                      <InputLine label={title+'-试验结果'}>
                        <SuffixInput value={inp?.[tag+'v'] || ''}
                                     onChange={e => setInp({...inp, [tag+'v']: e.currentTarget.value || undefined})}>
                          {0===t? 'kN' : 'N'}</SuffixInput>
                      </InputLine>
                    </React.Fragment>;
                  })}
                </LineColumn>
                <InputLine label={area+'-结果判定'}>
                  <SelectInput value={inp?.[btag+'r'] || ''} list={检查结论选}
                               onChange={e => setInp({...inp, [btag+'r']: e.currentTarget.value || undefined})}/>
                </InputLine>
            </React.Fragment>;
        })}
        {tail杆拉力}
    </InspectRecordLayout>;
});
/*附表10 牵引杆拉力
避免无法点击： 需循环体的内部上 <RepLink ori rep={rep} tag={'RodTensileForce'} key={k}>
* */
export const RodTensileForceVw = ({orc, rep, label,}: { orc: any, rep: any, label: string }
) => {
  const avBrkF=itemAtb杆拉.flatMap(table => (Number(calcAverageArrObj(orc?.[table],(row)=>row?.F, 2,2)) || '') );
  return <>
    <div css={{"@media print": {paddingBottom: '9rem', pageBreakInside: 'avoid'}}}>
      <Text id='RodTensileForce' variant="h4" css={{marginTop: '1rem',
      }}>{label}</Text>
      试验条件：天气:{orc?.天气杆拉} &nbsp;温度：{orc?.温度杆拉} ℃ 最大风速：{orc?.风速杆拉} m/s 空气最大相对湿度: {orc?.湿度杆拉}%；
      <div css={{display: 'inline-flex'}}>试验路面类型：{orc?.路面杆拉}</div>
    </div>
    <Table fixed={ ["5%", "9%", "9%", "6%", "13%", "13%", "%", "14%","15%"]  }
                    css={{borderCollapse: 'collapse', "@media print": {marginTop: '-9rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell rowSpan={2} colSpan={2}>制动项目</CCell><CCell rowSpan={2} colSpan={2}>行驶方向</CCell><CCell rowSpan={2}>规定速度(km/h)</CCell>
          <CCell rowSpan={2}>实测速度(km/h)</CCell><CCell colSpan={2}>制动力F（kN）</CCell><CCell rowSpan={2}>最大操纵力(N)</CCell>
        </TableRow>
        <TableRow><CCell>测量值</CCell><CCell>平均值</CCell></TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'RodTensileForce'}>
          {项目s.map((bigxm, k: number) => {
            return <RepLink ori rep={rep} tag={'RodTensileForce'} key={k}>
                {行驶s.map((xst, i: number) => {
                  const sbiao=项目ts[k] + xst;
                  return <React.Fragment key={i}>
                    {方向s.map((fxian, t: number) => {
                          return <TableRow key={t}>
                            {0===t && 0===i && 0===k && <CCell rowSpan={8}>满载</CCell>}
                            {0===t && 0===i && <CCell rowSpan={4}>{项目s[k]}</CCell>}
                            {0===t && <CCell rowSpan={2}>{行驶s[i]}</CCell>}
                            <CCell>{fxian}</CCell>
                            {0===t && 0===i && <CCell rowSpan={4}>≤1.6</CCell>}
                            <CCell>{orc?.[sbiao]?.[t]?.s}</CCell><CCell>{orc?.[sbiao]?.[t]?.F}</CCell>
                            {0===t && <CCell rowSpan={2}>{avBrkF[k*2+ i]}</CCell>}
                            <CCell>{orc?.[sbiao]?.[t]?.m}</CCell>
                          </TableRow>
                    })}
                  </React.Fragment>
                })}
            </RepLink>
          })}
        </RepLink>
      </TableBody>
    </Table>
    <Table fixed={ ["13%","33%", "18%", "%", "15%"] } css={{borderCollapse: 'collapse', }} tight miniw={800}>
      <TableHead>
        <TableRow><CCell colSpan={2}>试验项目</CCell><CCell>要求值</CCell><CCell>试验结果</CCell><CCell>结果判定</CCell></TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'RodTensileForce'}>
          {试验杆Rs.map((area, i: number) => {
            return <React.Fragment key={i}>
                {(new Array(2).fill(null)).map((_,t:number) => {
                  const tag=试验杆ns[i*2 +t];
                  const title=试验杆s[i*2 +t];
                  return <TableRow key={t}>
                    {0===t && <CCell rowSpan={2}>{area}</CCell>}
                    <CCell>{title}</CCell>
                    <CCell>{orc?.[tag+'a']}</CCell><CCell>{orc?.[tag+'v']}</CCell>
                    {0===t && <CCell rowSpan={2}>{orc?.[tag+'r']}</CCell>}
                  </TableRow>
                })}
            </React.Fragment>
          })}
          <TableRow>
            <Cell colSpan={5} css={{whiteSpace: 'pre-wrap'}}>{tail杆拉力}</Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};

/*其它类似页面
* */
//【注意】表11中的 C3.5.4 热衰减最大操纵力（N）的俩个字段是和表10同名的！
export const tail制动距= <Text css={{"@media print": {fontSize: '0.875rem'}}}>
  注：1、冷态制制动距离应小于要求值。<br/>
  2、热衰减试验制动距离应不大于冷态试验制动距离的125%。<br/>
  3、最大操纵力要求：踩下踏板，最大操纵力≤450N；松开踏板，最大操纵力≤200N；握紧手把，最大操纵力≤150N；转向操纵杆，最大操纵力≤150N
</Text>;
// const 制 项目s= ['冷态行车制动','热衰减行车制动' ];
const 制项目ts= ['制冷','制热'];
//计算平均值所用的存储字段名。 必须和 ”项目ts“ ”行驶s“关联一致!。
const itemAtb制距=['制冷前进','制冷后退','制热前进','制热后退'];
// const 行驶s= ['前进','后退' ];
// const 方向s= ['正','反' ];
const 制动距s= ['冷态制动距离（m）','冷态最大操纵力（N）','热衰减制距离（m）','热衰减最大操纵力（N）'];
//附表10，11采用不同命名字段：  【'热操纵'】例外的！
const 制动距ns0= ['冷态制距','冷操制','衰制距',];
const 制动距ns=制动距ns0.concat('热操纵');
const 制动距Rs= ['C3.5.3', 'C3.5.4'];
export const itemA制动距= ['天气制距','温度制距','风速制距','湿度制距','路面制距',] as string[];
itemA制动距.push(...itemAtb制距);
制动距ns0.forEach((name, i: number) => {
  if(0===i || 2===i)  itemA制动距.push(name+'a',name+'v',name+'r');
  else  itemA制动距.push(name+'a',name+'v');
});
//加和表10需公用的字段 '热操纵'； 表11和表10公用的存储！
const itemA制动距m=itemA制动距.concat('热操纵a','热操纵v');
export const StopDistance=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA制动距m,);
      const {inp, setInp} = useItemInputControl({ ref });
      //制动距离存储沿用表10制动力F的都是.F;  没改动！
      const avBrkF=itemAtb制距.flatMap(table => (Number(calcAverageArrObj(inp?.[table],(row)=>row?.F, 2,2)) || '') );
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        试验条件：
        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center',justifyContent:'center'}}>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            天气:
            <BlobInputList value={inp?.天气制距 || ''} rows={1} datalist={天气选}
                           style={{display: 'inline-flex', width: '5rem', maxWidth: '100%', fontSize: '1rem',}}
                           listStyle={css({fontSize: '1rem',})}
                           onListChange={v => setInp({...inp, 天气制距: v || undefined})}/>
          </div>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            温度：
            <Input value={inp?.温度制距 || ''} size={2} style={{display: 'inline-flex', width: 'unset'}}
                   onChange={e => setInp({...inp, 温度制距: e.currentTarget.value || undefined}) }/>
            ℃；
          </div>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            最大风速：
            <Input value={inp?.风速制距 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                   onChange={e => setInp({...inp, 风速制距: e.currentTarget.value || undefined}) }/>
            m/s；
          </div>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            空气最大相对湿度:
            <Input value={inp?.湿度制距 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                   onChange={e => setInp({...inp, 湿度制距: e.currentTarget.value || undefined}) }/>
            %；
          </div>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            试验路面类型：
            <BlobInputList value={inp?.路面制距 || ''} rows={1} datalist={路面选}
                           style={{display: 'inline-flex', width: '19rem', maxWidth: '100%', fontSize: '1rem',}}
                           listStyle={css({fontSize: '1rem',})}
                           onListChange={v => setInp({...inp, 路面制距: v || undefined})}/>
          </div>
        </div>
        <hr/>
        {项目s.map((bigxm, k: number) => {
          return <React.Fragment key={k}>
            <Text variant="h6" css={{fontWeight: 800}}>制动项目, 满载 + {bigxm}:</Text>
            <LineColumn column={8}>
              {行驶s.map((xst, i: number) => {
                const sbiao=制项目ts[k] + xst;
                return <React.Fragment key={i}>
                  {方向s.map((fxian, t: number) => {
                    return <React.Fragment key={t}>
                      <InputLine label={`${xst}-${fxian}-制动初速度`}>
                        <SuffixInput value={inp?.[sbiao]?.[t]?.s || ''}
                                     onChange={e => tableSetInp(sbiao, t, inp, setInp, 's', e.currentTarget.value || undefined)}>km/h</SuffixInput>
                      </InputLine>
                      <InputLine label={`${xst}-${fxian}-制动距离`}>
                        <SuffixInput value={inp?.[sbiao]?.[t]?.F || ''}
                                     onChange={e => tableSetInp(sbiao, t, inp, setInp, 'F', e.currentTarget.value || undefined)}>m</SuffixInput>
                      </InputLine>
                      <InputLine label={`${xst}-${fxian}-最大操纵力`}>
                        <SuffixInput value={inp?.[sbiao]?.[t]?.m || ''}
                                     onChange={e => tableSetInp(sbiao, t, inp, setInp, 'm', e.currentTarget.value || undefined)}>N</SuffixInput>
                      </InputLine>
                    </React.Fragment>;
                  })}
                </React.Fragment>;
              })}
            </LineColumn>
            {行驶s.map((xst, i: number) => {
              return  `${bigxm} ${xst} 平均制动距离= ${avBrkF[k*2 +i]}（m） `
            })}
          </React.Fragment>;
        })}
        <hr/>
        试验项目:
        {制动距Rs.map((area, i: number) => {
          const btag=制动距ns[i*2 ];
          return <React.Fragment key={i}>
            <LineColumn>
              {(new Array(2).fill(null)).map((_,t:number) => {
                const tag=制动距ns[i*2 +t];
                const title=制动距s[i*2 +t];
                return <React.Fragment key={t}>
                  <InputLine label={title+'-要求值'}>
                    <SuffixInput value={inp?.[tag+'a'] || ''}
                                 onChange={e => setInp({...inp, [tag+'a']: e.currentTarget.value || undefined})}>
                      {0===t? 'm' : 'N'}</SuffixInput>
                  </InputLine>
                  <InputLine label={title+'-试验结果'}>
                    <SuffixInput value={inp?.[tag+'v'] || ''}
                                 onChange={e => setInp({...inp, [tag+'v']: e.currentTarget.value || undefined})}>
                      {0===t? 'm' : 'N'}</SuffixInput>
                  </InputLine>
                </React.Fragment>;
              })}
            </LineColumn>
            <InputLine label={area+'-结果判定'}>
              <SelectInput value={inp?.[btag+'r'] || ''} list={检查结论选}
                           onChange={e => setInp({...inp, [btag+'r']: e.currentTarget.value || undefined})}/>
            </InputLine>
          </React.Fragment>;
        })}
        {tail制动距}
    </InspectRecordLayout>;
  });
/*附表11 制动距离试验记录
* */
export const StopDistanceVw = ({orc, rep, label,}: { orc: any, rep: any, label: string }
) => {
  const avBrkF=itemAtb制距.flatMap(table => (Number(calcAverageArrObj(orc?.[table],(row)=>row?.F, 2,2)) || '') );
  return <>
    <div css={{"@media print": {paddingBottom: '9rem', pageBreakInside: 'avoid'}}}>
      <Text id='StopDistance' variant="h4" css={{marginTop: '1rem',
      }}>{label}</Text>
      试验条件：天气:{orc?.天气制距} &nbsp;温度：{orc?.温度制距} ℃ 最大风速：{orc?.风速制距} m/s 空气最大相对湿度: {orc?.湿度制距}%；
      <div css={{display: 'inline-flex'}}>试验路面类型：{orc?.路面制距}</div>
    </div>
    <Table fixed={ ["5%", "11%", "9%", "10%", "18%", "%", "14%","16%"] }
             css={{borderCollapse: 'collapse', "@media print": {marginTop: '-9rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell rowSpan={2} colSpan={2}>制动项目</CCell><CCell rowSpan={2} colSpan={2}>行驶方向</CCell>
          <CCell rowSpan={2}>制动初速度(km/h)</CCell><CCell colSpan={2}>制动距离（m）</CCell><CCell rowSpan={2}>最大操纵力(N)</CCell>
        </TableRow>
        <TableRow><CCell>测量值</CCell><CCell>平均值</CCell></TableRow>
      </TableHead>
      <TableBody>
          {项目s.map((bigxm, k: number) => {
            return <RepLink ori rep={rep} tag={'StopDistance'} key={k}>
              {行驶s.map((xst, i: number) => {
                const sbiao=制项目ts[k] + xst;
                return <React.Fragment key={i}>
                  {方向s.map((fxian, t: number) => {
                    return <TableRow key={t}>
                      {0===t && 0===i && 0===k && <CCell rowSpan={8}>满载</CCell>}
                      {0===t && 0===i && <CCell rowSpan={4}>{项目s[k]}</CCell>}
                      {0===t && <CCell rowSpan={2}>{行驶s[i]}</CCell>}
                      <CCell>{fxian}</CCell>
                      <CCell>{orc?.[sbiao]?.[t]?.s}</CCell><CCell>{orc?.[sbiao]?.[t]?.F}</CCell>
                      {0===t && <CCell rowSpan={2}>{avBrkF[k*2+ i]}</CCell>}
                      <CCell>{orc?.[sbiao]?.[t]?.m}</CCell>
                    </TableRow>
                  })}
                </React.Fragment>
              })}
            </RepLink>
          })}
      </TableBody>
    </Table>
    <Table fixed={ ["13%","33%", "18%", "%", "15%"] } css={{borderCollapse: 'collapse', }} tight miniw={800}>
      <TableHead>
        <TableRow><CCell colSpan={2}>试验项目</CCell><CCell>要求值</CCell><CCell>试验结果</CCell><CCell>结果判定</CCell></TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'StopDistance'}>
          {制动距Rs.map((area, i: number) => {
            return <React.Fragment key={i}>
              {(new Array(2).fill(null)).map((_,t:number) => {
                const tag=制动距ns[i*2 +t];
                const title=制动距s[i*2 +t];
                return <TableRow key={t}>
                  {0===t && <CCell rowSpan={2}>{area}</CCell>}
                  <CCell>{title}</CCell>
                  <CCell>{orc?.[tag+'a']}</CCell><CCell>{orc?.[tag+'v']}</CCell>
                  {0===t && <CCell rowSpan={2}>{orc?.[tag+'r']}</CCell>}
                </TableRow>
              })}
            </React.Fragment>
          })}
          <TableRow>
            <Cell colSpan={5} css={{whiteSpace: 'pre-wrap'}}>{tail制动距}</Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
